<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<view class="yb-stepper yb-flex yb-row">
			<yb-tap active @tap="dec" :disabled="disabled || valueSync <= min" custom-class="action yb-align-center" :custom-style="{
				'background-color': decSync.bgColor,
				'padding': '10rpx',
				'min-width': '60rpx',
				'border-radius': Util.pixelunit(inputSync.radius)
			}">
				<yb-icon name="dec" :size="decSync.size" :color="decSync.color"></yb-icon>
			</yb-tap>
			<view class="yb-flex input-box" :style="{
				'background-color': inputSync.bgColor,
				'width': Util.pixelunit(inputSync.width),
				'border-radius': Util.pixelunit(inputSync.radius)
			}">
				<template v-if="focus">
					<input focus class="input yb-flex-1" :disabled="disabledInput || disabled" :style="{
						'font-size': Util.pixelunit(inputSync.size),
						'color': inputSync.color
					}" type="number" :value="valueSync" @input="onInput" @focus="focus = true" @blur="focus = false">
				</template>
				<template v-else>
					<view @tap="focus = true" class="input yb-flex yb-flex-1 yb-justify-center yb-align-center" >
						<text :style="{
							'font-size': Util.pixelunit(inputSync.size),
							'color': inputSync.color
						}">{{valueSync}}</text>
					</view>
				</template>
			</view>
			<yb-tap active @tap="inc" :disabled="disabled || (max > -1 && valueSync >= max)" custom-class="action yb-align-center" :custom-style="{
				'background-color': incSync.bgColor,
				'padding': '10rpx',
				'min-width': '60rpx',
				'border-radius': Util.pixelunit(inputSync.radius)
			}">
				<yb-icon name="inc" :size="incSync.size" :color="incSync.color"></yb-icon>
			</yb-tap>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: Number,
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			disabledInput: {
				type: Boolean,
				default: false
			},
			fixed: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: -1
			},
			min: {
				type: Number,
				default: 0
			},
			step: {
				type: Number,
				default: 1
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					dec: {},
					inc: {},
					input: {}
				}, this.options)
			},
			decSync () {
				return Object.assign({}, {
					color: '#999',
					bgColor: '#eee',
					size: '42rpx',
					radius: 0
				}, Util.typeof(this.optionsSync.dec) == 'Object' ? this.optionsSync.dec : Util.typeof(this.optionsSync.dec) == 'String' ? {text: this.optionsSync.dec} : {})
			},
			incSync () {
				return Object.assign({}, {
					color: '#999',
					bgColor: '#eee',
					size: '42rpx',
					radius: 0
				}, Util.typeof(this.optionsSync.inc) == 'Object' ? this.optionsSync.inc : Util.typeof(this.optionsSync.inc) == 'String' ? {text: this.optionsSync.inc} : {})
			},
			inputSync () {
				return Object.assign({}, {
					color: '#444',
					bgColor: '#ddd',
					width: '80rpx',
					size: '34rpx',
					radius: 0
				}, this.optionsSync.input)
			}
		},
		data () {
			return {
				valueSync: 0,
				focus: false
			}
		},
		mounted() {
			this.valueSync = this.value
		},
		methods: {
			onInput (e) {
				this.valueSync = parseFloat(e.detail.value)
				this.onChange()
			},
			inc () {
				this.valueSync += this.step
				if ( this.max > -1 && this.valueSync > this.max ) {
					this.valueSync = this.max
				}
				this.onChange()
			},
			dec () {
				this.valueSync -= this.step
				if ( this.valueSync < this.min ) {
					this.valueSync = this.min
				}
				this.onChange()
			},
			onChange () {
				this.valueSync = this.valueSync ? parseFloat(this.valueSync.toFixed(this.fixed)) : 0
				this.$emit('input', this.valueSync)
				this.$emit('change', this.valueSync)
			}
		},
		watch: {
			value (newVal) {
				this.valueSync = newVal
			}
		}
	}
</script>

<style scoped>
	.yb-stepper .input-box {
		margin: 0 5rpx;
	}
	.yb-stepper .input {
		text-align: center;
		border-width: 0;
	}
</style>